<!--comment.vue-->
<template>
<div>
<mu-appbar title="添加联系人">
  <mu-icon-button icon="arrow_back" slot="left" v-on:click="handleBack"/>
	<mu-icon-button id="id_send" icon="send" slot="right" @click="handleSend"/>
</mu-appbar>
    <div id="id_contact">
            <mu-text-field
            v-model='contactName'
            label='名字'
            required
            fullWidth
            labelFloat
            type="text"
            />
            <br/>
            <mu-text-field
            label="手机号码"
            v-model='contactNumber'
            required
            type="number"
            fullWidth
            labelFloat/>

       </div>

</div>
</template>

<style>
  #id_send{/*旋转30度 */
    transform:rotate(-30deg);
    -ms-transform:rotate(-30deg); 	/* IE 9 */
    -moz-transform:rotate(-30deg); 	/* Firefox */
    -webkit-transform:rotate(-30deg); /* Safari 和 Chrome */
    -o-transform:rotate(-30deg); 	/* Opera */
  }

  .mu-card-header{
    text-align:left;
  }

  #id_comment{
    margin:0.5rem;
    text-align:left;
  }

  #id_contact{
     margin-left:1rem;
     margin-right:1rem;
 }
 .mu-text-field{
     padding-left:0.5rem;
     padding-right:0.5rem;
     text-align: left;
 }
</style>

<script>
import iconAvatar from '@/assets/img/uicon.jpg';
import { Toast } from 'mint-ui';
import * as types from '@/store/mutation-types';

export default {
  data() {
    return {
      IconAvatar: iconAvatar,
      contacts: null,
      contactName: null,
      contactNumber: null,
    };
  },
  methods: {
    handleBack() {
      this.$router.back();
    },
    handleSend() {
      if (this.contactName === null || this.contactNumber === null) {
        Toast('请添加名称和手机号');
        return;
      }
      const contacts = [{ name: this.contactName, mobile: this.contactNumber }];
      const params = {
        data: contacts,
      };
      this.$store.dispatch('createContacts', params);
    },
  },
  computed: {
    getCreatedContact() {
      return this.$store.getters.getCreatedContact;
    },
  },
  watch: {
    getCreatedContact: function createdContact(data) {
      if (data) {
        Toast('添加好友成功');
        // 更新列表联系人数据
        const contact = { name: this.contactName, mobile: this.contactNumber };
        let contacts = [];
        const nil = !this.$store.getters.getContacts;
        if (nil === false) {
          const tmp = this.$store.getters.getContacts;
          contacts = tmp.slice(0, tmp.length);
        }
        contacts.push(contact);
        this.$store.commit(types.FETCH_CONTACTS, contacts);
        // 返回上一页
        this.$router.back();
      }
    },
  },
};
</script>
